﻿@using DJY.Code
<!DOCTYPE html>
<html>
<head>
    <title>欢迎页</title>
    <link href="~/Content/css/framework-font.css" rel="stylesheet" />
    <link href="~/Content/css/framework-ui.css" rel="stylesheet" />
    <script src="~/Content/js/jquery/jquery-2.1.1.min.js"></script>
    <link href="~/Content/css/framework-theme.css" rel="stylesheet" />
    <link href="~/Content/js/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/css/framework-theme.css" rel="stylesheet" />
    <link href="/favicon.ico" rel="shortcut icon">
    <style>
        #copyrightcontent {
            height: 30px;
            line-height: 29px;
            overflow: hidden;
            position: absolute;
            top: 100%;
            margin-top: -30px;
            width: 100%;
            background-color: #fff;
            border: 1px solid #e6e6e6;
            padding-left: 10px;
            padding-right: 10px;
        }

        .dashboard-stats {
            float: left;
            width: 20%;
        }

        .dashboard-stats-item {
            position: relative;
            overflow: hidden;
            color: #fff;
            cursor: pointer;
            height: 105px;
            margin-right: 25px;
            margin-bottom: 10px;
            padding: 20px 20px;
        }

            .dashboard-stats-item .m-top-none {
                margin-top: 2px;
            }

            .dashboard-stats-item h2 {
                font-size: 35px;
                font-family: inherit;
                line-height: 1.1;
                font-weight: 500;
            }

            .dashboard-stats-item h5 {
                font-size: 14px;
                font-family: inherit;
                margin-top: 3px;
                line-height: 1.1;
            }


            .dashboard-stats-item .stat-icon {
                position: absolute;
                top: 10px;
                right: 10px;
                font-size: 30px;
                opacity: .3;
            }

        .dashboard-stats i.fa.stats-icon {
            width: 50px;
            padding: 20px;
            font-size: 50px;
            text-align: center;
            color: #fff;
            height: 50px;
            border-radius: 10px;
        }

        .panel-parent {
            border: 1px solid #e6e6e6;
            background-color: #fff;
            overflow: hidden;
        }

        .panel-default {
            border: none;
            border-radius: 0px;
            margin-bottom: 0px;
            box-shadow: none;
            -webkit-box-shadow: none;
        }

            .panel-default > .panel-heading {
                color: #777;
                background-color: #fff;
                border-color: #e6e6e6;
                padding: 10px;
                position: relative;
            }

        .panel-heading > .panel-heading-tool {
            position: absolute;
            right: 0px;
            margin-right: 5px;
            top: 10.5px;
        }

        .panel-default > .panel-body ul {
            overflow: hidden;
            padding: 0;
            margin: 0px;
            margin-top: -5px;
        }

            .panel-default > .panel-body ul li {
                line-height: 27px;
                list-style-type: none;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

                .panel-default > .panel-body ul li .time {
                    color: #a1a1a1;
                    float: right;
                    padding-right: 5px;
                }

        [class*="loader-"] {
            display: inline-block;
            width: 1em;
            height: 1em;
            color: inherit;
            vertical-align: middle;
            pointer-events: none;
        }

        .loader-01 {
            border: .2em solid transparent;
            border-top-color: currentcolor;
            border-radius: 50%;
            -webkit-animation: 1s loader-01 linear infinite;
            animation: 1s loader-01 linear infinite;
            position: relative;
        }

            .loader-01:before {
                content: '';
                display: block;
                width: inherit;
                height: inherit;
                position: absolute;
                top: -.2em;
                left: -.2em;
                border: .2em solid currentcolor;
                border-radius: 50%;
                opacity: .5;
            }

        @@-webkit-keyframes loader-01 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @@keyframes loader-01 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        .wfmsg > div {
            display: inline-block;
        }

        .wfmsg .action {
            cursor: pointer;
            float: right;
            right: 5px;
        }
    </style>
    <script src="~/Content/js/charts/Chart.js"></script>
    <script>

        function processMsg() {
            var me = $(this).parent();
            var id = me.attr("id").substring(1);
            loading(true);
            $.getJSON("/WorkFlow/WorkFlow/ProcessMsg?id=" + id, function (rsp) {
                loading(false);
                if (rsp.state) {
                    var size = ["800px", "700px"];
                    if (rsp.node.size) {
                        size = rsp.node.size.split(",");
                        size[0] += "px";
                        size[1] += "px";
                    }
                    top.layer.open({
                        id: "ProcessMsg",
                        type: 2,
                        shade: 0.3,
                        title: rsp.node.name,
                        fix: false,
                        area: size,
                        content: "/WorkFlow/WorkFlow/Process?id=" + rsp.msg,
                        btn: ['提交', '关闭'],
                        btnclass: ['btn btn-primary', 'btn btn-danger'],
                        yes: function (index) {
                            top.frames["ProcessMsg"].process(function (pr) {
                                if (pr.state) {
                                    top.layer.close(index);
                                    top.layer.alert("处理成功", {
                                        icon: "fa-check-circle",
                                        title: "处理结果",
                                        btn: ['确认'],
                                        btnclass: ['btn btn-primary']
                                    }, loadMyMsg);
                                }
                                else if (pr.msg) {
                                    top.layer.alert(pr.msg, {
                                        icon: "fa-times-circle",
                                        title: "处理结果",
                                        btn: ['确认'],
                                        btnclass: ['btn btn-primary']
                                    });
                                }
                                else {
                                    top.layer.close(index);
                                    loadMyMsg();

                                }
                            });
                        }, cancel: function () {
                            return true;
                        }
                    });
                }
                else {
                    top.layer.msg(rsp.msg, { icon: "fa-times-circle" }, loadMyMsg);
                }
            });
        }

        function loadMyMsg(index) {
            if (index) {
                top.layer.close(index);
            }
            $("#MyWfMsg").html("<div class=\"loader-01\"></div>");
            $.getJSON("/WorkFlow/WorkFlow/MyMsgList", function (rsp) {
                if (rsp && rsp.length > 0) {
                    $("#MyWfMsg").empty();
                    rsp.forEach(function (m) {
                        var mi = $("<div class=\"wfmsg\"><i class=\"fa\"></i>[<div class=\"cate\"></div>]<div class=\"msg\"></div><div class=\"action\">[处理]</div></div>");
                        mi.attr("id", "m" + m.id).attr("title", m.cate + m.msg).attr("node", m.msg);
                        mi.find("i").addClass("fa-" + (m.weight == 0 ? "star-o" : (m.weight == 1 ? "star-half-o" : "star")));
                        mi.find(".cate").text(m.cate);
                        mi.find(".msg").text(m.msg);
                        $("#MyWfMsg").append(mi);
                    });
                }
                else {
                    $("#MyWfMsg").html("<div class=\"empty\">没有记录</div>");
                }
            });
        }

        $(function () {
            GetSalaryChart();
            GetLeaveChart();
            //使用定时器每秒向div写入当前时间
            setInterval(function () {
                getDate();
            }, 1000);

            $("#MyWfMsg").on("click", ".action", processMsg);

            loadMyMsg();
        });

        function GetSalaryChart() {
            var randomScalingFactor = function () { return Math.round(Math.random() * 100) };
            var lineChartData = {
                labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "8月", "10月", "11月", "12月"],
                datasets: [
                    {
                        label: "My First dataset",
                        fillColor: "rgba(220,220,220,0.2)",
                        strokeColor: "rgba(220,220,220,1)",
                        pointColor: "rgba(220,220,220,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(220,220,220,1)",
                        data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
                    },
                    {
                        label: "My Second dataset",
                        fillColor: "rgba(151,187,205,0.2)",
                        strokeColor: "rgba(151,187,205,1)",
                        pointColor: "rgba(151,187,205,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(151,187,205,1)",
                        data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
                    }
                ]
            }
            var ctx = document.getElementById("salarychart").getContext("2d");
            window.myLine = new Chart(ctx).Line(lineChartData, {
                responsive: false,
                bezierCurve: false
            });
        }
        function GetLeaveChart() {
            var randomScalingFactor = function () { return Math.round(Math.random() * 100) };
            var a_value = randomScalingFactor();
            var b_value = randomScalingFactor();
            var c_value = randomScalingFactor();
            var d_value = randomScalingFactor();
            var doughnutData = [
                {
                    value: a_value,
                    color: "#F7464A",
                    highlight: "#FF5A5E",
                    label: "事假"
                },
                {
                    value: b_value,
                    color: "#46BFBD",
                    highlight: "#5AD3D1",
                    label: "病假"
                },
                {
                    value: c_value,
                    color: "#FDB45C",
                    highlight: "#FFC870",
                    label: "公休假"
                },
                {
                    value: d_value,
                    color: "#949FB1",
                    highlight: "#A8B3C5",
                    label: "调休假"
                }
            ];
            var ctx = document.getElementById("leavechart").getContext("2d");
            window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, { responsive: false });
            $("#a_value").html(a_value + "小时");
            $("#b_value").html(b_value + "小时");
            $("#c_value").html(c_value + "小时");
            $("#d_value").html(d_value + "小时");
        }

        //得到时间并写入div
        function getDate() {
            //获取当前时间
            var date = new Date();
            //格式化为本地时间格式
            var date1 = date.toLocaleString();
            //获取div
            var div1 = document.getElementById("times");
            //将时间写入div
            div1.innerHTML = date1;
        }

        function OpenNewTab(dataId, dataUrl, menuName) {
            window.parent.$("#header-nav>ul>li.open").removeClass("open");
            //var dataId = $(this).attr('data-id');
            if (dataId != "") {
                top.$.cookie('Djy_currentmoduleid', dataId, { path: "/" });
            }
            if (dataUrl == undefined || $.trim(dataUrl).length == 0) {
                return false;
            }
            var tab = window.parent.$(".menuTab[data-id='" + dataUrl + "']");
            if (tab.length == 0) {
                var str = '<a href="javascript:;" class="active menuTab" data-id="' + dataUrl + '">' + menuName + ' <i class="fa fa-remove"></i></a>';
                window.parent.$('.menuTab').removeClass('active');
                var str1 = '<iframe class="Djy_iframe" id="iframe' + dataId + '" name="iframe' + dataId + '"  width="100%" height="100%" src="' + dataUrl + '" frameborder="0" data-id="' + dataUrl + '" seamless></iframe>';
                window.parent.$('.mainContent').find('iframe.Djy_iframe').hide();
                window.parent.$('.mainContent').append(str1);
                loading(true);
                window.parent.$('.mainContent iframe:visible').load(function () {
                    loading(false);
                });
                window.parent.$('.menuTabs .page-tabs-content').append(str);
                scrollToTab(tab);
            }
            else if (!tab.hasClass("active")) {
                $(tab).addClass('active').siblings('.menuTab').removeClass('active');
                scrollToTab(tab);
                window.parent.$(".mainContent .Djy_iframe[data-id='" + dataUrl + "']")
                    .show().siblings('.Djy_iframe').hide();
            }
            return false;
        }

        function scrollToTab(element) {
            var marginLeftVal = calSumWidth($(element).prevAll()), marginRightVal = calSumWidth($(element).nextAll());
            var tabOuterWidth = calSumWidth(window.parent.$(".content-tabs").children().not(".menuTabs"));
            var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
            var scrollVal = 0;
            if (window.parent.$(".page-tabs-content").outerWidth() < visibleWidth) {
                scrollVal = 0;
            } else if (marginRightVal <= (visibleWidth - $(element).outerWidth(true) - $(element).next().outerWidth(true))) {
                if ((visibleWidth - $(element).next().outerWidth(true)) > marginRightVal) {
                    scrollVal = marginLeftVal;
                    var tabElement = element;
                    while ((scrollVal - $(tabElement).outerWidth()) > (window.parent.$(".page-tabs-content").outerWidth() - visibleWidth)) {
                        scrollVal -= $(tabElement).prev().outerWidth();
                        tabElement = $(tabElement).prev();
                    }
                }
            } else if (marginLeftVal > (visibleWidth - $(element).outerWidth(true) - $(element).prev().outerWidth(true))) {
                scrollVal = marginLeftVal - $(element).prev().outerWidth(true);
            }
            window.parent.$('.page-tabs-content').animate({
                marginLeft: 0 - scrollVal + 'px'
            }, "fast");
        }

        function loading(bool, text) {
            var $loadingpage = top.$("#loadingPage");
            var $loadingtext = $loadingpage.find('.loading-content');
            if (bool) {
                $loadingpage.show();
            } else {
                if ($loadingtext.attr('istableloading') == undefined) {
                    $loadingpage.hide();
                }
            }
            if (!!text) {
                $loadingtext.html(text);
            } else {
                $loadingtext.html("数据加载中，请稍后…");
            }
            $loadingtext.css("left", (top.$('body').width() - $loadingtext.width()) / 2 - 50);
            $loadingtext.css("top", (top.$('body').height() - $loadingtext.height()) / 2);
        }


        function calSumWidth(element) {
            var width = 0;
            $(element).each(function () {
                width += $(this).outerWidth(true);
            });
            return width;
        }
    </script>
</head>
<body>
    <div id="areascontent">
        <div class="rows" style="height:28px;margin-bottom: 5px; border: 1px solid #e6e6e6; background-color:white;">
            <div style="position: absolute;right: 0px;line-height: 28px;vertical-align: middle;height: 28px;border: none;">
                <div id="times" style="display: inline-block;vertical-align: top;"></div>
                <iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=1" width="315" height="26" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
            </div>
        </div>
        <div class="rows" style="margin-bottom: 5px;overflow: hidden;">
            <div style="float: left; width: 69%; margin-right: 1%;">
                <div style="height: 265px; border: 1px solid #e6e6e6; background-color: #fff;">
                    <div class="panel panel-default">
                        <div class="panel-heading"><i class="fa fa-rss fa-lg" style="padding-right: 5px;"></i>通知公告</div>
                        <div class="panel-body">
                            <ul>
                                <li><a href="#">【通知】办卡大优惠</a><span class="time">2016-07-21</span></li>
                                <li><a href="#">【公告】还款新规定，速看</a><span class="time">2016-07-21</span></li>
                                <li><a href="#">【公告】劳动节集体出游指南</a><span class="time">2016-07-21</span></li>
                                <li><a href="#">【通知】2016年G20财长和央行行</a><span class="time">2016-07-21</span></li>
                                <li><a href="#">【通知】2016年G20财长和央行行</a><span class="time">2016-07-21</span></li>
                                <li><a href="#">【通知】品牌价值的最佳选择</a><span class="time">2016-07-21</span></li>
                                <li><a href="#">【公告】采购商城全新升级自营业正品</a><span class="time">2016-07-21</span></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div style="float: right; width: 30%;">
                <div style="height: 265px; " class="panel-parent">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <i class="fa fa-tags fa-lg" style="padding-right: 5px;"></i>我的待办
                            <div class="panel-heading-tool">
                                <a href="javascript:void(0);" onclick="OpenNewTab('dfca57f6-adf5-4325-beab-36d42ed7ac63','/WorkFlow/WorkFlow/MyMsg','我的待办')">更多</a>
                            </div>
                        </div>
                        <div class="panel-body" style="padding-top: 20px;" id="MyWfMsg">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="rows" style="margin-bottom: 1%; overflow: hidden;">
            <div style="float: left; width: 69%;">
                <div style="height: 350px; border: 1px solid #e6e6e6; background-color: #fff;">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <i class="fa fa-area-chart fa-lg" style="padding-right: 5px;"></i>考勤统计
                            <div style="float: right">
                                <span style="font-weight: 500;"><i class="fa fa-square" style="color: #dcdcdc; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>迟到</span>
                                <span style="margin-left: 10px; font-weight: 500;"><i class="fa fa-square" style="color: #97bbcd; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>缺卡</span>
                            </div>
                        </div>
                        <div class="panel-body" style="padding-bottom: 0px;">
                            <canvas id="salarychart" style="height: 285px; width: 100%; padding-right: 10px;"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div style="float: right; width: 30%;">
                <div style="height: 350px; border: 1px solid #e6e6e6; background-color: #fff;">
                    <div class="panel panel-default">
                        <div class="panel-heading"><i class="fa fa-pie-chart fa-lg" style="padding-right: 5px;"></i>请假统计</div>
                        <div class="panel-body" style="padding-top: 20px;">
                            <canvas id="leavechart" style="height: 160px; width: 100%;"></canvas>
                            <div style="text-align: center; padding-top: 20px;">
                                <span><i class="fa fa-square" style="color: #F7464A; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>事假</span>
                                <span style="margin-left: 10px;"><i class="fa fa-square" style="color: #46BFBD; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>病假</span>
                                <span style="margin-left: 10px;"><i class="fa fa-square" style="color: #FDB45C; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>公休假</span>
                                <span style="margin-left: 10px;"><i class="fa fa-square" style="color: #949FB1; font-size: 20px; padding-right: 5px; vertical-align: middle; margin-top: -3px;"></i>调休假</span>
                            </div>
                            <div style="margin-top: 20px; padding-top: 18px; height: 60px; border-top: 1px solid #e6e6e6;">
                                <div style="width: 25%; text-align: center; float: left;">
                                    <span id="a_value">16.5小时</span>
                                    <p style="color: #a1a1a1">事假</p>
                                </div>
                                <div style="width: 25%; text-align: center; float: left;">
                                    <span id="b_value">7.5小时</span>
                                    <p style="color: #a1a1a1">病假</p>
                                </div>
                                <div style="width: 25%; text-align: center; float: left;">
                                    <span id="c_value">13小时</span>
                                    <p style="color: #a1a1a1">公休假</p>
                                </div>
                                <div style="width: 25%; text-align: center; float: left;">
                                    <span id="d_value">19小时</span>
                                    <p style="color: #a1a1a1">调休假</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="position:fixed;bottom:20px;width:100%;">
        <div style="text-align:center;height:34px;margin:0 auto;width:230px;font-weight:bold">@ViewBag.CompanyName 版权所有 Copyright@@@DateTime.Now.Year @ConfigHelper.Version</div>
    </div>
</body>
</html>
